<template>
  <Card :shadow="shadow">
    <div class="card-name"><div class="name">菜单列表</div></div>
    <div class="content-con">
      <div class="bank-search">
        <div class="search-item">
          <Form ref="formInline" :model="form" inline>
            <FormItem prop="menu_name">
              <i-input v-model="form.menu_name" placeholder="菜单名"></i-input>
            </FormItem>
            <FormItem><i-button class="btn-green" @click="searchMenu">搜索</i-button></FormItem>
          </Form>
        </div>
      </div>
      <div class="bank-add">
        <i-button @click="add" class="btn-green">新增</i-button>
        <i-button class="btn-green" @click="dels">删除选中</i-button>
      </div>
      <div class="bank-form">
        <div class="form-item">
          <TreeTable ref="table" expand-key="title" :expand-type="false" :columns="menuColumns" :data="menuListData">
            <template slot="isShow" slot-scope="scope">
              <Tag :color="scope.row.is_show === '显示' ? 'green' : 'red'" disable-transitions>{{ scope.row.is_show }}</Tag>
            </template>
            <template slot="btn" slot-scope="scope">
              <Button @click="addSub(scope.row)" size="small">增加子菜单</Button>
              <Button @click="edit(scope.row)" class="btn-green" size="small">编辑</Button>
              <Button @click="del(scope.row)" type="error" size="small">删除</Button>
            </template>
          </TreeTable>
        </div>
      </div>
    </div>
  </Card>
</template>
<script>
import { searchMenu, delMenu } from '@/api/menu.js'
import { getUserInfo } from '@/api/user.js'
import { moreArrayEach } from '@/libs/tools'

export default {

  props: {
    shadow: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      loading: true,
      ids: [], // 勾选中的数组
      pageCurrent: 1, // 当前页
      form: {
        menu_name: ''
      },
      menuColumns: [
        {
          title: '菜单名',
          key: 'title',
          width: 220
        },
        {
          title: '父级',
          key: 'parent_name'
        },
        {
          title: '模块',
          key: 'module'
        },
        {
          title: '控制器名',
          key: 'controller',
          width: 160
        },
        {
          title: '方法名',
          key: 'action'
        },
        {
          title: '路由name',
          key: 'router_name'
        },
        {
          title: '是否显示',
          key: 'is_show',
          type: 'template',
          template: 'isShow'
        },
        {
          title: '操作',
          key: 'btn',
          width: 260,
          align: 'center',
          headerAlign: 'center',
          type: 'template',
          template: 'btn'
        }
      ],
      histories: [],
      menuListData: [],
      statuList: [
        {
          value: '1',
          label: '显示'
        },
        {
          value: '0',
          label: '隐藏'
        }
      ],
      model: ''
    }
  },
  methods: {
    getUserData () {
      getUserInfo(this.$store.state.user.userInfo.id)
        .then(res => {
          const data = res.data
          this.$store.commit('UPDATE_USERINFO', data)
          this.tidyRes()()
        })
        .catch(err => {
          this.$Message.error(err.msg)
        })
    },
    // getMenuList (menuData = null) {
    //   let userInfo = menuData != null ? menuData : this.$store.state.user.userInfo
    //   if (!userInfo.length) {
    //     this.menuListData = userInfo.menuList
    //   }
    // },
    tidyRes () {
      var data = []
      this.menuListData = this.$store.state.user.userInfo.menuList

      this.menuListData.map(menu => {
        data.push(this.initMenu(menu))
      })
      this.$set(this, 'menuListData', data)
    },
    initMenu (menu) {
      var data = {}
      // checkMenus = ',' + this.formData.checked_menus + ',';
      data.title = menu.menu_name
      data.id = menu.id
      data.parent_name = menu.parent_name
      data.module = menu.module
      data.controller = menu.controller
      data.action = menu.action
      data.router_name = menu.router_name
      data.is_show = menu.is_show
      data.pid = menu.pid
      if (menu.child && menu.child.length > 0) {
        data.children = []
        menu.child.map(child => {
          data.children.push(this.initMenu(child))
        })
      } else {
        // data.checked = checkMenus.indexOf(String(',' + data.id + ',')) !== -1;
        data.expand = false
      }
      return data
    },

    searchMenu () {
      if (!this.form.menu_name.length) {
        this.getUserData()
      } else {
        searchMenu({ q: this.form.menu_name }).then(res => {
          this.menuListData = []
          this.menuListData = res.data
        }).catch(err => {
          this.$message.error(err.msg)
        })
      }
    },
    add () {
      this.$router.push({
        name: 'menu-add'
      })
    },
    addSub (row) {
      this.$router.push({
        name: 'menu-add-sub',
        params: {
          id: row.id,
          router_name: row.router_name
        }
      })
    },
    edit (row) {
      this.$router.push({
        name: 'menu-edit',
        params: {
          row: row
        }
      })
    },
    del (row) {
      this.$Modal.confirm({
          title:'确认信息',
          content:'确认删除？',
          okText: '确认',
          cancelText: '取消',
          onOk:async()=>{ 
			delMenu({ id: row.id })
			  .then(res => {
				this.$Message.success(res.msg)
				this.getUserData()
			  })
			  .catch(res => {
				this.$Message.error(res.msg)
			  })
		  }
      })
    },
    dels () {
      this.ids = this.$refs.table.getCheckedProp(['id'])
		this.$Modal.confirm({
		      title:'确认信息',
		      content:'确认删除选中的' + this.ids.length + '条信息？',
		      okText: '确认',
		      cancelText: '取消',
		      onOk:async()=>{ 
				delMenu({ id: this.ids })
				  .then(res => {
					this.$Message.success(res.msg)
					this.getUserData()
				  })
				  .catch(res => {
					this.$Message.error(res.msg)
				  })
		  }
      })
    },

    filterTag (value, row) {
      return row.tag === value
    }
  },
  created () {
    this.getUserData()
  }
}
</script>
<style lang="less">
.card-name {
  height: 42px;
  border-bottom: 1px solid #f6f6f6;
  .name {
    margin: 0 15px;
    padding: 0;
    width: 65px;
    text-align: center;
    line-height: 42px;
    border-bottom: 2px solid #5fb878;
  }
}
.ivu-select-item-selected,
.ivu-select-item-selected:hover {
  color: #fff;
  background-color: #5fb878;
}
.ivu-table-cell {
  padding-left: 7px;
  padding-right: 7px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: break-all;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.content-con {
  margin: 15px;
  .bank-search {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    .search-item {
      display: flex;
      justify-content: space-between;
    }
  }
  .bank-add {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-bottom: 15px;
  }
  .bank-form {
  }
  .page {
    position: relative;
    width: 100%;
    padding: 7px 7px 0;
    height: 50px;
    font-size: 12px;
    // overflow: hidden;
    border-bottom: 1px solid #dcdee2;
    border-left: 1px solid #dcdee2;
    border-right: 1px solid #dcdee2;
  }
}
</style>
